<template>
  <div class="bigbox">
    <div class="leftbox">
      <left-tree @checkChange="checkChange"></left-tree>
    </div>
    <div class="rightbox">
      <div class="top">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-position="left"
        >
          <el-row :gutter="20">
            <el-col :span="6" style="display: flex">
              <el-form-item label="时间间隔">
                <el-radio-group
                  style="width: 120px"
                  size="small"
                  v-model="radio2"
                >
                  <el-radio-button label="month">月</el-radio-button>
                  <el-radio-button label="year">年</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="日期">
                <el-date-picker
                  size="small"
                  v-model="form.dateTime"
                  :type="radio2 === 'month' ? 'daterange' : 'monthrange'"
                  range-separator="至"
                  style="width: 420px"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :format="radio2 === 'month' ? 'yyyy-MM-dd' : 'yyyy-MM'"
                  :value-format="radio2 === 'month' ? 'yyyy-MM-dd' : 'yyyy-MM'"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="18" style="text-align: right">
              <el-form-item>
                <Twobtn @chaxun="getList" @chongzhi="reset"></Twobtn>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="main">
        <TopTile
          @command="command"
          @daochu="daochu"
          @shuaxin="getList"
        ></TopTile>
        <div style="width: 100%; height: 50%">
          <nt-echart :loading="loading" :options="barOptions"></nt-echart>
        </div>
        <div style="display: flex; justify-content: space-between; height: 45%">
          <div style="width: 60%; height: 100%">
            <nt-table
              v-loading="loading"
              height="100%"
              :issize="issize"
              :tableData="List"
              :tableConfig="tableConfig"
              highlight-current-row
              @current-change="handleCurrentChange"
            >
            </nt-table>
          </div>
          <div style="width: 40%; height: 100%">
            <nt-echart :loading="loading" :options="pieOptions"></nt-echart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ntEchart from '@/components/nt-echart.vue'
import ntTable from '@/components/nt-table'
import dayjs from 'dayjs'
import { exportexcel } from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import { getUserElectricityApi } from '@/api/Intelligence-maintenance/Auxiliary-analysis/User-electricity'
import LeftTree from '../components/Left-tree.vue'
export default {
  components: { ntEchart, ntTable, LeftTree, TopTile },
  name: 'UserElectricity',
  data() {
    return {
      radio2: 'month',
      loading: false,
      companyNos: '',
      form: {
        dateTime: [
          dayjs().startOf('month').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ]
      },
      List: [],
      tableConfig: [
        {
          label: '用户',
          prop: 'name',
          align: 'center'
        },
        {
          label: '尖时段(kWh)',
          prop: 'epowerJsd',
          align: 'right'
        },
        {
          label: '峰时段(kWh)',
          prop: 'epowerFsd',
          align: 'right'
        },
        {
          label: '平时段(kWh)',
          prop: 'epowerPsd',
          align: 'right'
        },
        {
          label: '谷时段(kWh)',
          prop: 'epowerGsd',
          align: 'right'
        },
        {
          label: '总电量(kWh)',
          prop: 'epowerTotal',
          align: 'right'
        }
      ],
      issize: 'middle',
      treeData: [],
      checkItem: {}
    }
  },
  watch: {
    companyNos: {
      handler(newVal) {
        this.getList()
      },
      deep: true
    },
    radio2: {
      handler(newVal) {
        if (newVal === 'month') {
          this.form.dateTime = [
            dayjs().startOf('month').format('YYYY-MM-DD'),
            dayjs().format('YYYY-MM-DD')
          ]
        } else {
          this.form.dateTime = [
            dayjs().format('YYYY-MM'),
            dayjs().format('YYYY-MM')
          ]
        }
      }
    }
  },
  computed: {
    barOptions() {
      const data = [
        {
          name: '尖',
          type: 'bar',
          stack: 'Ad',
          data: this.List.map((i) => [i.name, i.epowerJsd])
        },
        {
          name: '峰',
          type: 'bar',
          stack: 'Ad',
          data: this.List.map((i) => [i.name, i.epowerFsd])
        },
        {
          name: '平',
          type: 'bar',
          stack: 'Ad',
          data: this.List.map((i) => [i.name, i.epowerPsd])
        },
        {
          name: '谷',
          type: 'bar',
          stack: 'Ad',
          data: this.List.map((i) => [i.name, i.epowerGsd])
        }
      ]
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        series: data,
        color: ['#ff6666', '#5996ff', '#18f2ce', '#ffbe4c']
      }
    },
    pieOptions() {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          // data: ['尖', '峰', '平', '谷'],
          formatter: function (name) {
            return name.split(':')[0] || name
          },
          top: 'bottom'
        },
        series: [
          {
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'center',
              formatter: function (a, b, c) {
                return `${a.name}
                  
  ${a.value} kWh`
              },
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            color: ['#a64cff'],
            data:
              this.List.length > 0
                ? [
                    {
                      value: this.checkItem?.epowerTotal || 0,
                      name: '总电量'
                    }
                  ]
                : []
          },
          {
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30
            },
            data:
              this.List.length > 0
                ? [
                    {
                      value: this.checkItem?.epowerJsd || 0,
                      name: `尖时段:${this.checkItem?.epowerJsd}`,
                      color: ['#ff6666']
                    },
                    {
                      value: this.checkItem?.epowerFsd || 0,
                      name: `峰时段:${this.checkItem?.epowerFsd}`,
                      color: ['#5996ff']
                    },
                    {
                      value: this.checkItem?.epowerPsd || 0,
                      name: `平时段:${this.checkItem?.epowerPsd}`,
                      color: ['#18f2ce']
                    },
                    {
                      value: this.checkItem?.epowerGsd || 0,
                      name: `谷时段:${this.checkItem?.epowerGsd}`,
                      color: ['#ffbe4c']
                    }
                  ]
                : []
          }
        ]
      }
    }
  },
  created() {
    // this.getUserDayLoadList()
  },
  methods: {
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    reset() {
      this.radio2 = 'month'
    },
    checkChange(companyNos) {
      this.companyNos = companyNos
    },
    // 表格点击获取饼图数据
    handleCurrentChange(val) {
      console.log(val)
      this.checkItem = val
    },

    async getList() {
      this.loading = true
      const res = await getUserElectricityApi({
        companyNos: this.companyNos,
        startTime: this.form.dateTime[0],
        endTime: this.form.dateTime[1],
        periodType: this.radio2
      })
      this.List = res.data.list
      this.handleCurrentChange(this.List[0])
      this.loading = false
    },
    daochu() {
      exportexcel(
        '/pio-microservice-biz/pio/electricity/overview/bay/excel',
        {
          companyNos: this.companyNos,
          startTime: this.form.dateTime[0],
          endTime: this.form.dateTime[1],
          periodType: this.radio2
        },
        '电量概况'
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  padding: 10px;
  display: flex;
  height: 100%;
  .leftbox {
    width: 300px;
    margin-right: 10px;
    padding: 10px;
    background-color: #fff;
  }
  .rightbox {
    flex: 1;
    width: 1px;
    height: 100%;
    background-color: #f1f1f1;
    .top {
      background-color: #fff;
      padding: 20px;
      box-sizing: border-box;
      height: 80px !important;
      width: 100% !important;
      margin-bottom: 10px;
    }
    .main {
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
    }
  }
}
</style>
